<template>
<div class="custom-password">
  <h1>5. 请参考下图， 使⽤Vue 编写⼀个 CustomPassword 密码输⼊组件，并尽可
能实现如下要求</h1>
<p>1. 限制仅可输⼊数字
2. 可⾃定义密码的⻓度，默认6位
3. 在输⼊完当前位置的密码后，⾃动聚焦到下⼀个输⼊框
4. 在删除当前位置的密码后，⾃动聚焦到上⼀个输⼊框
5. 在组件上可通过 `v-model` 获取到输⼊的密码内容</p>
<div class="numInputs">
        <input
            v-for="(n, index) in amount"
            v-model="arr[index]"
            maxlength="1"
            @keydown="nextFocus($event, index)"
            ref="numInput"
            type="tel"
        />
    </div>
</div>
</template>

<script>
import { 
  defineComponent, 
  getCurrentInstance, 
  reactive, 
  ref,
  watch,onMounted
} from 'vue';
import { useRoute, useRouter } from 'vue-router';


export default defineComponent({
  name: 'CustomPassword',
  // 注册你的组件
  components:{  },
  props: {
    amount: {
            default: 6,
            type: Number
        }
  },
  
  emits: [
  ],
  setup(props, {attrs, slots, emit, expose }){
  const route = useRoute();
  const router = useRouter();
  const arr = ref([])
  const numInput = ref(null)
  watch(arr, (val)=>{
    // console.log(val,'vabba')
    emit('input', val.join(''));
  })
  onMounted(()=>{
    numInput.value[0] && numInput.value[0].focus()
  })
  const nextFocus=($event, index)=> {
    // console.log(index, arr.value)
            // 键入时光标跳转
           arr.value[index] &&
               numInput.value[index + 1] &&
               numInput.value[index + 1].focus();
            // 删除
            if ($event.keyCode === 8) {
                if (arr.value[index]) {
                   arr.value[index] = '';
                   arr.value = JSON.parse(JSON.stringify(arr.value));
                   numInput.value[index].focus();
                } else {
                   numInput.value[index - 1] &&
                       numInput.value[index - 1].focus();
                }
            }
        }
    return {
      nextFocus,
      numInput,
      arr,
      emit,     // 触发事件 (方法，等同于 emit)
      expose,   // 暴露公共 property (函数)
    }
  },
  

  methods:{
  
  }
});
</script>

<style lang="less" scoped>
.numInputs {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-around;
    input {
        width: 40px;
        border-bottom: 1px solid rgba(221, 221, 221, 1);
        font-size: 18px;
        color: #2b293a;
        line-height: 30px;
        text-align: center;
    }
}
</style>